<template>
  <div class="dashboard-container" >
       <el-alert type="info" style="font-size: 32px;">
        <i style="font-size: 16px;" class="el-icon-info"></i> 共 {{page.total }} 条数据
      </el-alert>
      <button @click="list()"></button>
      <el-table
      :data="tableData"
      style="width: 100%;"
      :header-cell-style="{background: '#fafafa'}"
      >
      <el-table-column
        prop="type"
        label="操作类型"
        align="center">
      </el-table-column>
      <el-table-column
        prop="reviewer"
        label="操作人"
        align="center">
      </el-table-column>
      <el-table-column
        prop="title"
        label="执行结果"
        align="center">
      </el-table-column>
      <el-table-column
        prop="display_time"
        label="操作时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        label="描述"
        align="center">
      </el-table-column>
      </el-table>
      <!-- 分页 -->
   <page-tool :page='page' @handleCurrentChange='handleCurrentChange' @handleSizeChange='handleSizeChange'></page-tool>
  </div>
</template>

<script>
import { list } from '@/api/example/table'
import pageTool from '../components/page-tool.vue'
export default {
  components: {
    pageTool
  },
  name: 'base-logs',
  data () {
    return {
      tableData: [],
      page: {
        page: 1,
        limit: 10,
        counts: 0
      }
    }
  },
  created () {
    this.list()
  },
  methods: {
    async list () {
      const { data } = await list(this.page)
      console.log(data)
      this.page.counts = data.total
      this.tableData = data.items
    },
    // 分页
    handleCurrentChange (currentPage) {
      this.page.page = currentPage
      this.list()
    },
    handleSizeChange (pagesize) {
      this.page.limit = pagesize
      this.list()
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container{
  margin: 20px;
  padding: 20px;
 background-color: #fff;}
</style>
